<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">
  <title>Document</title>
</head>
<img src="tank2.png" id="tank" style="position:absolute;left:10px;top:10px;" />
<body>
  <script>
      var  music = new Audio();
      music.src='2.mp3';
      document.onkeyup = function (){
        music.pause();
      }

      document.onkeydown = function (e){
        music.play();
        if(e.key=="d" || e.keyCode == 39){
          tank.style.left = parseInt(tank.style.left) + 6 +'px';
          tank.src ='tank2.png';
        }else if(e.key=="a" || e.keyCode == 37){
          tank.style.left = parseInt(tank.style.left) - 6 +'px';
          tank.src ='tank1.png';
        }else if(e.key=="w" || e.keyCode == 38){
          tank.style.top = parseInt(tank.style.top) - 6 +'px';
          tank.src ='tank3.png';
        }else if(e.key=="s" || e.keyCode == 40){
          tank.style.top = parseInt(tank.style.top) + 6 +'px';
          tank.src ='tank4.png';
        }
      }
  </script>
</body>
</html>

